<template>
  <div>
    <div v-if="searchStatus" class="box-shadow pad10 mgb10">
      <el-form :model="queryParams" ref="queryRef" :inline="true" class="fnmb">
        <div class="flex jbetween">
          <div>
            <el-form-item label="编号">
              <el-input
                v-model="queryParams.Code"
                placeholder="请输入"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="名称">
              <el-input
                v-model="queryParams.Name"
                placeholder="请输入"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </div>
          <div class="flex fend acenter">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="flex jbetween bgw center pad10 r10">
      <div class="flex center acenter">
        <el-button
          type="primary"
          v-hasPermi="[props.hasPermi.add]"
          icon="CirclePlusFilled"
          @click="handleAdd"
          >添加{{ props.Title }}</el-button
        >
      </div>
      <div class="flex center">
        <pagination
          class="mgr10"
          v-show="Total > 0"
          :total="Total"
          v-model:page="page.PageIndex"
          v-model:limit="page.PageSize"
          @pagination="getList"
        /><right-toolbar
          :showSearch="true"
          v-model:searchStatus="searchStatus"
          @queryTable="getList"
          :columns="columns"
        ></right-toolbar>
      </div>
    </div>
    <div class="tableContent">
      <div class="tableItem" v-for="item in tableList">
        <div class="picContent">
          <div class="pic">
            <el-image
              :src="proxy.$addFileHead(item.ShowPicture)"
              :preview-src-list="[proxy.$addFileHead(item.ShowPicture)]"
              fit="cover"
            />
          </div>
          <div class="operation">
            <el-dropdown @command="handleDropdown($event, item)">
              <el-icon color="white" size="24px"><MoreFilled /></el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <div v-hasPermi="[props.hasPermi.edit]">
                    <el-dropdown-item :command="{ name: '编辑' }">
                      <el-icon><Edit /></el-icon>编辑
                    </el-dropdown-item>
                  </div>
                  <div v-hasPermi="[props.hasPermi.delete]">
                    <el-dropdown-item :command="{ name: '删除' }">
                      <el-popover placement="left" :width="230">
                        <template #reference>
                          <el-button
                            type="text"
                            style="color: red; height: 22px"
                          >
                            <el-icon><Delete /></el-icon>删除</el-button
                          >
                        </template>
                        <div class="flex acenter">
                          <div style="margin-bottom: -2px !important">
                            <el-icon color="#E6A23C"
                              ><QuestionFilled
                            /></el-icon>
                          </div>
                          <div>
                            确认删除该数据吗?<el-button
                              type=""
                              style="margin-left: 20px"
                              plain
                              size="small"
                              @click="handleDelete(item)"
                              >确认</el-button
                            >
                          </div>
                        </div>
                      </el-popover>
                    </el-dropdown-item>
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="descript">
          <div class="siteName">{{ item.Name }}</div>
          <div class="subText">
            <span>编号：{{ item.Code }}</span>
            <br />
            <span>负责人：{{ proxy.$filterUserName(item.Principal) }}</span>
          </div>
          <div class="flex stateBar jbetween acenter">
            <div class="sitePlace">
              <span><svg-icon icon-class="place" /></span>
              <span class="building">{{ item.Name_Area }}</span>
            </div>
            <div
              class="state"
              :class="item.IsOccupy ? 'IsOccupy' : 'NotOccupy'"
            >
              {{ item.IsOccupy ? '占用中' : '正常' }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <MyTable
      :tableList="tableList"
      :total="Total"
      :columns="columns"
      v-model:page="page"
      v-model:searchStatus="searchStatus"
      :btnList="$checkBtn(['TeachingSite:edit', 'TeachingSite:delete'])"
      @getList="getList"
      @edit="handleEdit"
      @delete="handleDelete"
    >
      <template v-slot:tabTop>
        <el-button
          type="primary"
          v-hasPermi="['TeachingSite:add']"
          icon="CirclePlusFilled"
          @click="handleAdd"
          >添加生活场所</el-button
        >
      </template>
    </MyTable> -->
    <MyDialog
      v-model:show="show"
      :title="title"
      @confirm="confirm"
      :formRef="formRef"
      width="80%"
      :destroy="true"
    >
      <el-form
        :model="formData"
        :rules="rules"
        inline
        :label-width="90"
        ref="formRef"
        class="wid100"
      >
        <el-row>
          <el-form-item label="展示图片" prop="ShowPicture">
            <FileUpload
              :iconList="['preview', 'delete', 'setImg']"
              type="img"
              @getImgItem="getImgItem"
              :detail="false"
              v-model:fileList="fileList"
            ></FileUpload>
          </el-form-item>
        </el-row>
        <el-row>
          <MyCol>
            <el-form-item label="编号" prop="Code">
              <el-input
                v-model="formData.Code"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </MyCol>
          <MyCol>
            <el-form-item label="名称" prop="Name">
              <el-input
                v-model="formData.Name"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </MyCol>
          <MyCol>
            <el-form-item label="负责人" prop="Principal">
              <Selector
                category="用户列表"
                :query="{ Type: 2 }"
                v-model="formData.Principal"
              ></Selector>
            </el-form-item>
          </MyCol>
          <MyCol>
            <el-form-item label="学校区域" prop="ID_Area">
              <Selector
                category="学校区域"
                v-model="formData.ID_Area"
              ></Selector>
            </el-form-item>
          </MyCol>

          <MyCol>
            <el-form-item label="场地位置" prop="Location">
              <el-input
                v-model="formData.Location"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </MyCol>
          <MyCol>
            <el-form-item label="6S执行方案" prop="ID_6SPlan">
              <Selector v-model="formData.ID_6SPlan" category="6S执行方案" />
            </el-form-item>
          </MyCol>
          <MyCol>
            <el-form-item label="备注" prop="Remark">
              <el-input
                v-model="formData.Remark"
                placeholder="请输入"
                clearable
                type="textarea"
                autosize
              />
            </el-form-item>
          </MyCol>
        </el-row>
      </el-form>
    </MyDialog>
  </div>
</template>

<script setup name="LivingPlace">
import { ref, getCurrentInstance, onMounted } from 'vue';
import {
  AddPlace,
  EditPlace,
  DelPlace,
  GetPlaceList_Page,
  GetPlaceDetail
} from '@/api/site/index.js';
const props = defineProps({
  Type: {
    default: 2
  },
  Title: {
    default: '生活场所'
  },
  hasPermi: {
    default: {
      add: 'LivingPlace:add',
      delete: 'LivingPlace:delete',
      edit: 'LivingPlace:edit'
    }
  }
});
const { proxy } = getCurrentInstance();
const tableList = ref([]);
const Total = ref(0);
const columns = ref([
  { label: '序号' },
  { label: '编号', prop: 'Code' },
  { label: '名称', prop: 'Name' },
  { label: '负责人', prop: 'Principal', user: true },
  // { label: "类型", prop: "myType" },
  { label: '展示图片', prop: 'ShowPicture', img: true, hideTooltip: true },
  { label: '区域位置', prop: 'Name_Area' },
  { label: '场地位置', prop: 'Location' },
  { label: '占用状态', tag: true, prop: 'tags' },
  { label: '备注', prop: 'Remark' },
  { label: '操作', width: 160 }
]);
proxy.$formatKey(columns.value);
const page = ref({
  PageIndex: 1,
  PageSize: 10
});
const searchStatus = ref(true);
const queryParams = ref({
  Code: '',
  Name: '',
  NoPage: '' //如果传"true"，则返回全部数据不分页
});
const queryRef = ref();
const show = ref(false);
const title = ref();
const formRef = ref();
const rules = ref({
  Code: [{ required: true, message: '请输入', trigger: 'blur' }],
  Name: [{ required: true, message: '请输入', trigger: 'blur' }],
  Principal: [{ required: true, message: '请选择', trigger: 'change' }]
});
const formData = ref({});
const fileList = ref([]);

onMounted(() => {
  getList();
});

async function getList() {
  try {
    show.value = false;
    let query = {
      ...queryParams.value,
      ...page.value,
      Type: props.Type
    };
    let res = await GetPlaceList_Page(query);
    res.data.List?.forEach(item => {
      if (item.IsOccupy) {
        item.tags = [
          {
            name: '占用中',
            type: 'danger'
          }
        ];
      } else {
        item.tags = [
          {
            name: '正常',
            type: 'success'
          }
        ];
      }
    });
    tableList.value = res.data.List;
    Total.value = res.data.Total;
  } catch (error) {
    console.log(error);
  }
}

function handleDropdown(e, row) {
  switch (e.name) {
    case '编辑':
      handleEdit(row);
      break;
  }
}

function getImgItem(item) {
  formData.value.ShowPicture = item.removeHeadUrl;
  proxy.$modal.msgSuccess('选择成功');
}

async function confirm(val) {
  try {
    if (val) {
      let query = {
        ...formData.value,
        Pictrues: fileList.value?.map(item => {
          return { FileID: item.ID, Sort: item.Sort };
        }),
        Type: props.Type
      };
      if (formData.value.ID) {
        await EditPlace(query);
        proxy.$modal.msgSuccess('修改成功');
      } else {
        await AddPlace(query);
        proxy.$modal.msgSuccess('添加成功');
      }
      getList();
    }
  } catch (error) {
    console.log(error);
  }
}

async function handleEdit(row) {
  try {
    let res = await GetPlaceDetail({ ID: row.ID });
    let ids = (formData.value = {
      ...res.data.Info,
      Pictrues: JSON.stringify(res.data.Pictrues?.map(item => item.ID)),
      ID: row.ID
    });
    fileList.value = res.data.Pictrues;
    fileList.value?.forEach(item => (item.ID = item.FileID));
    title.value = '修改' + props.Title;
    show.value = true;
  } catch (error) {
    console.log(error);
  }
}
async function handleDelete(row) {
  try {
    await DelPlace({ ID: row.ID });
    proxy.$modal.msgSuccess('删除成功');
    getList();
  } catch (error) {
    console.log(error);
  }
}
function handleAdd() {
  formData.value = {};
  fileList.value = [];
  show.value = true;
  title.value = '添加' + props.Title;
}
function handleQuery() {
  page.value.PageIndex = 1;
  getList();
}
function resetQuery() {
  queryParams.value = {
    Code: '',
    Name: '',
    NoPage: ''
  };
  handleQuery();
}
</script>

<style lang="scss" scoped>
.tableContent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 20px;
  grid-gap: 20px;
  .tableItem {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 0 10px rgb(236 236 236);
    .picContent {
      cursor: pointer;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      width: 100%;
      padding: 6px;
      :deep(.pic) {
        .el-image {
          width: 100%;
          height: 12vh;
          img {
            border-radius: 12px;
            object-fit: cover;
          }
        }
      }
      .operation {
        background-color: #868686;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
        opacity: 0.7;
        &:hover {
          background-color: #00b578;
        }
      }
    }
    .descript {
      padding: 4px 10px 10px 10px;
      .siteName {
        font-weight: bold;
        margin-bottom: 4px;
        font-size: 16px;
      }
      .subText {
        color: #93989a;
        font-size: 14px;
        span {
        }
        br {
        }
      }
      .flex.stateBar {
        margin-top: 4px;
        .sitePlace {
          span {
          }
          .building {
            margin-left: 6px;
            font-size: 14px;
            font-weight: bold;
          }
        }
        .state {
          padding: 6px 20px;
          color: white;
          border-radius: 12px;
          &.IsOccupy {
            background-color: #f56c6c;
          }
          &.NotOccupy {
            background-color: #00b578;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1300px) {
  .stateBar {
    .state {
      padding: 6px 10px !important;
      font-size: 14px;
    }
  }
}
</style>
